{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

<div class="ten-slideshow" id="Slideshow-{{ section.id }}">
    <div class="page-width">
      <div class="slideshow_line">
        <div class="title-wrapper">
           <h2 class="title">
            {{ section.settings.title | escape }}
           </h2>
        </div>
        <div class="slider-slideshow">
          <div class="swiper-father">
            <div class="slideshow-swiper-container swiper-container">
                <div class="swiper-wrapper">
                {%- for block in section.blocks -%}
                  <div class="swiper-slide">
                    <div class="multicolumn-card">
                      <div class="banner">
                        <div class="banner__media media">
                
                        <img
                          srcset="
                          {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                          {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                          {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                          {%- if block.settings.image.width >= 1140 -%}{{ block.settings.image | img_url: '1140x' }} 1140w,{%- endif -%}
                         {%- if block.settings.image.width >= 1200 -%}{{ block.settings.image | img_url: '1200x' }} 1200w,{%- endif -%}
                         {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                         {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                         {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                         {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                         sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                         data-src="{{ block.settings.image | img_url: '1500x' }}"
                         loading="lazy"
                         class="lazyload"
                         alt="{{ block.settings.image.alt | escape }}"
                         width="{{ block.settings.image.width }}"
                         height="{{ block.settings.image.height }}"
                         >
                      </div>
                      </div>
                      <div class="multicolumn-card__info">
                        {%- if block.settings.title != blank -%}
                        <div class="p">{{ block.settings.title }}</div>
                        {%- endif -%}
                         {%- if block.settings.text != blank -%}
                         <div class="rte">{{ block.settings.text }}</div>
                         {%- endif -%}
                       </div>
                    </div>
                  </div>
                 {%- endfor -%}
                </div>
            </div>
              <!-- Add Arrows -->
              <div class="swiper-button-next ten-vi slideshow_m">{% render 'swiper-next' %}</div>
              <div class="swiper-button-prev ten-vi slideshow_m">{% render 'swiper-prev' %}</div>
          </div>
        </div>
      </div>
    </div>
</div>


<script>
    var swiper = new Swiper('.slideshow-swiper-container', {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      effect : 'fade',
      fadeEffect:{
        crossFade:true
      },
      navigation: {
        nextEl: '.swiper-button-next.slideshow_m',
        prevEl: '.swiper-button-prev',
      },
    });
</script>

{% schema %}
{
  "name": "slideshow",
  "class": "spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "slideshow",
      "label": "slideshow"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.multicolumn.blocks.column.settings.text.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "slideshow",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}
